<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
    	<script type="text/javascript" src="../js/localstorage.js"></script>
		<script type="text/javascript" src="../js/jquery-2.1.0.js" ></script>
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<script src="http://api.map.baidu.com/api?v=2.0&ak=A1LU7iHS0avqQwPLAxbhKn0UYSQCuRVH"></script>
		<link rel="stylesheet" type="text/css" href="../css/zTreeStyle.css">
		<script type="text/javascript" src="../js/jquery.ztree.core.js"></script>
		<style type="text/css">
			body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";margin: 0;padding: 0;}
			/*body {
				margin: 0;
				padding: 0;
			}*/
			.d1,.d2,.d3,.d4{
				width: 178px;
				height: 22px;
				bottom: 11.5%;		
				text-align: center;		
				position: absolute;
				transition: height 1s;				
				cursor: pointer;
			}
		

			.d1{
				left:18.7%;	
				height: 300px;			
				background: #7cb5ec;
			}
			.d2{
				left:37.7%;
				height: 220px;		
				background: #8085e9;
			}
			.d3{
				left:56.7%;
				height: 190px;		
				background: #90ed7d;
			}
			.d4{
				left:75.7%;
				height: 320px;		
				background: #f7a35c;
			}
			span{
				color: #000;;
			}
		</style>
	</head>

	<body onload="add_control()">
		<script type="text/javascript">
    	// tree节点点击事件  name为这个节点的值
		function zTreeOnClick(event, treeId, treeNode) {
		    $("#site").val(treeNode.name);
		};
		var setting = {
			callback: {
				onClick: zTreeOnClick
			}
		};
		var zNodes =[
			{ name:"香港", open:true,
				children: [
					{ name:"九龙区",open:true,
						children: [
							{ name:"场所A" },
							{ name:"场所B" },
							{ name:"场所C" }
						]},
					{ name:"旺角区",open:true,
					        children: [
							{ name:"场所A" },
							{ name:"场所B" },
							{ name:"场所C" }
						]},
					{ name:"西贡区",open:true,
                            children: [
							{ name:"场所A" },
							{ name:"场所B" },
							{ name:"场所C" }
						]},
					{ name:"油尖旺区",open:true,
                           children: [
							{ name:"场所A" },
							{ name:"场所B" },
							{ name:"场所C" }
						]},
					{ name:"深水埗区",open:true,
				           children: [
							{ name:"场所A" },
							{ name:"场所B" },
							{ name:"场所C" }
						   ]}
				]}
		];
    $(function(){
    	// $("#details").css("width",$("html").width()-250+"px")
    	// $(".listFilter").css("width",$("html").width()-200+"px")
    	// $(".reportResults").css("width",$("html").width()-200+"px")
    	// $("#tree").css("min-height",$("html").height()-150+"px")
    	$.fn.zTree.init($("#treeDemo"), setting, zNodes);
    })
    function add(){
    	$(".k-overlay,.content").css("display","flex");
    }
    function save(){
    	zNodes[0].children[0].children.push({ name:"场所"+Math.floor(Math.random()*100),open:true});
    	$.fn.zTree.init($("#treeDemo"), setting, zNodes);
    	$(".k-overlay,.content").css("display","flex");
    }
    </script>
    <script type="text/javascript">
    	$(function(){
    	
    		$("#qhbtn").click(function(){
    			alert(1)
    		})

			$("#site").click(function(e){
				$("#tree").slideDown(300);
    		})

    		// $("#site").blur(function(e){
    		// 	$("#tree").slideUp(300);
    		// })
    		$("#tree").hover(function(){},function(){
    			$("#tree").slideUp(300);
    			// $("#site").blur();
    		})
    	})
    </script>
		<div  style="z-index: 3;position: absolute;top: 5%;right: 1%; width: 200px;text-align: center;">
			<button id="site" style="background: #03a9f4;color: #fff;">
				<script>document.write(language.choiceSite)</script>
			</button>
			<div id="tree" style="display: none;background: #fff;opacity: 0.7;">								<!-- <button style="float: right;" onclick="add()">增加</button> -->
				<ul id="treeDemo" class="ztree"></ul>
			</div>
		</div>
	<div id="allmap"></div>	
		
	</body>

</html>

<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	map.centerAndZoom(new BMap.Point(114.1720064282, 22.2810079531), 12);

	var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
	var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
	var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
	/*缩放控件type有四种类型:
	BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/
	
	//添加控件和比例尺
	function add_control(){
		map.addControl(top_left_control);        
		map.addControl(top_left_navigation);     
		map.addControl(top_right_navigation);    
	}
	//移除控件和比例尺
	function delete_control(){
		map.removeControl(top_left_control);     
		map.removeControl(top_left_navigation);  
		map.removeControl(top_right_navigation); 
	}
</script>



<script type="text/javascript">
	// 百度地图API功能
//	var map = new BMap.Map("allmap");
//	var point = new BMap.Point(114.1720064282,22.2810079531);
//	map.centerAndZoom(point,12);
//
//	var geolocation = new BMap.Geolocation();
//	geolocation.getCurrentPosition(function(r){
//		if(this.getStatus() == BMAP_STATUS_SUCCESS){
//			var mk = new BMap.Marker(r.point);
//			map.addOverlay(mk);
//			map.panTo(r.point);			
//		}
//		else {
//			alert('failed'+this.getStatus());
//		}        
//	},{enableHighAccuracy: true})
	//关于状态码
	//BMAP_STATUS_SUCCESS	检索成功。对应数值“0”。
	//BMAP_STATUS_CITY_LIST	城市列表。对应数值“1”。
	//BMAP_STATUS_UNKNOWN_LOCATION	位置结果未知。对应数值“2”。
	//BMAP_STATUS_UNKNOWN_ROUTE	导航结果未知。对应数值“3”。
	//BMAP_STATUS_INVALID_KEY	非法密钥。对应数值“4”。
	//BMAP_STATUS_INVALID_REQUEST	非法请求。对应数值“5”。
	//BMAP_STATUS_PERMISSION_DENIED	没有权限。对应数值“6”。(自 1.1 新增)
	//BMAP_STATUS_SERVICE_UNAVAILABLE	服务不可用。对应数值“7”。(自 1.1 新增)
	//BMAP_STATUS_TIMEOUT	超时。对应数值“8”。(自 1.1 新增)
</script>